<script>
import { ref } from 'vue';
import { ElSelect, ElOption, ElIcon } from 'element-plus';
import { Timer } from '@element-plus/icons-vue';  // 导入你想用的图标

export default {
    components: {
        ElSelect,
        ElOption,
        ElIcon,
    },
    setup() {
        const value = ref('24'); // 默认值设为第一个选项的 value
        const options = ref([
            { value: '4', label: '过去4小时' },  // 图标名称
            { value: '24', label: '过去24小时' },
            { value: '48', label: '过去48小时' },
        ]);
        const tableTimeLabel = ref('过去24小时');

        // 当选择 `el-select` 时更新表格内容
        const updateTableColumns = (value) => {
            if (value === '4') {
                tableTimeLabel.value = '过去4小时';
            } else if (value === '24') {
                tableTimeLabel.value = '过去24小时';
            } else if (value === '48') {
                tableTimeLabel.value = '过去48小时';
            }
        };
        return {
            value,
            options,
            tableTimeLabel,
            updateTableColumns
        };
    },
    data() {
        return {
            // tableData 数据
            tableData: [
            ],
        };
    },
    methods: {
        // 定义行的类名，可以根据需要动态调整
        tableRowClassName({ row, rowIndex }) {
            // 在这里可以自定义每行的样式，例如根据某个条件改变行的颜色等
            if (rowIndex % 2 === 0) {
                return 'even-row'; // 偶数行
            } else {
                return 'odd-row'; // 奇数行
            }
        },
    },
};

</script>


<template>
    <div class="main">
        <div class="choose">
            <el-card class="card1" style="max-width: 300px;max-height: 70px;">
                <el-select v-model="value" placeholder="Select" size="large"
                    style="width: 240px;margin-left:10px;margin-top: -5px;"@change="updateTableColumns(value)">
                    <template #prefix>
                        <el-icon style="color:#0521cc;">
                            <Calendar />
                        </el-icon>
                    </template>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        <template #default>
                            {{ item.label }}
                        </template>
                    </el-option>
                </el-select>
            </el-card>
        </div>
        <div class="table-1">
            <el-card class="card2" style="max-width: 1400px;margin-left: 55px; margin-top: 25px;">
                <!-- 使用 el-table 渲染 tableData 数据 -->
                <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
                    <el-table-column :label="tableTrendLabel">
                        <template #header>
                            <el-icon style="margin-left: 80px;">
                                <Search />
                            </el-icon>
                            <p style="display: inline;margin-left: 20px;">趋势</p>
                            <p style="display: inline;font-size: smaller;">(上次更新时间：12月18日01：00)</p>
                        </template>
                        <template #default="{ row }">
                            {{ row.date }}
                        </template>
                    </el-table-column>
                    <!-- 在 Name 列的列名中添加图标 -->
                    <el-table-column :label="tableSearchLabel">
                        <template #header>
                            <p style="display: inline;margin-left: 20px;">搜索量</p>
                        </template>
                        <template #default="{ row }">
                            {{ row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column :label="tableTimeLabel">
                        <template #header>
                            <p style="display: inline;margin-left: 20px;">{{tableTimeLabel}}</p>
                        </template>
                        <template #default="{ row }">
                            {{ row.address }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<style scoped>
.card1 {
    margin-left: 55px;
    border-radius: 20px;
}
</style>